/** @jsx createElement */
import { View, Text, ScrollView, RefreshControl,Layout,Dialog,Button,Image  } from 'nuke';
import {createElement, Component,render} from 'rax';
import {Http} from '$util/index';
const { MultiRow ,Grid,Col}  = Layout;
import CountdownPromV1 from '$components/CountdownPromV1/';
import ShopTitleV1 from '$components/ShopTitleV1/';
import CountdownItemsV1 from '$components/CountdownItemsV1/';

const countdownId='9';
const countdownNum=600;
const countdownBg='https://img.alicdn.com/imgextra/i2/27390555/O1CN01GdORVX1FyEIBGxB16_!!27390555.jpg';
const shopTitle='我的店铺';
const isTmall='true';
const shopLev='10';
const shopIcon='https://img.alicdn.com/imgextra/i4/27390555/O1CN01lA6hF11FyEIHTWZDI_!!27390555.gif';
const shopLink='';

let App = class Index extends Component {
    constructor() {
        super();
        this.state={
            isRefreshing: false,
            refreshText: '↓ 下拉刷新',
            data:[],
			countdown:countdownNum,
			intervalId:0,
			pageSize:10,
			pageNum:1,
        }
    }
	componentDidMount(){
		var _self = this;
		Http.fetch({
            name:'interface.page.get_promo_items',
            data:{page:1,pageSize:_self.state.pageSize,taskId:countdownId}
        }).then(function(res){
			_self.setState({data:res.data,total:parseInt(res.total)});
        });
		setTimeout(function(){ 
			_self.countdownRun();
			_self.refs.modal1.hide();
		}, 3000);
	}

    handleRefresh=()=>{
        this.setState({
            isRefreshing: true,
            refreshText: '加载中',
        });
        //mock ajax
		
		var _self = this;
		Http.fetch({
            name:'interface.page.get_promo_items',
            data:{page:1,pageSize:_self.state.pageSize,taskId:countdownId}
        }).then(function(res){
			 _self.setState({
                isRefreshing: false,
                data: res.data,
                refreshText: '↓ 下拉刷新',
				pageNum:1
            });
        });
    }
    loadmore = ()=>{
        // 底部加载更多
		var _self = this;
		if(this.state.total>this.state.pageNum*this.state.pageSize){
			Http.fetch({
				name:'interface.page.get_promo_items',
				data:{page:_self.state.pageNum+1,pageSize:_self.state.pageSize,taskId:countdownId}
			}).then(function(res){
				_self.setState({
					data: _self.state.data.concat(res.data),
					pageNum:_self.state.pageNum+1
				});
			});
		}
    }
    hideModal = () => {
        this.refs.modal1.hide();
        this.refs.done.hide();
    }
    hideModalAndConfirm = () =>{
		this.countdownRun();
        this.refs.modal1.hide();
    }
	countdownRun = ()=>{
		let _self = this;
		if(_self.state.intervalId){
			clearInterval(_self.state.intervalId);
		}
		let i = setInterval(function(){
			if(_self.state.countdown==0){
				clearInterval(_self.state.intervalId);
				_self.refs.done.show();
			}
			_self.setState({countdown:_self.state.countdown-1});
		},1000);
		_self.setState({intervalId:i});
	}
    render() {
		var self=this;
        return (
            <ScrollView ref="vscroller" style={styles.vscroller} onEndReachedThreshold={1} onEndReached={this.loadmore}>
                <RefreshControl refreshing={this.state.isRefreshing} style={[styles.itemRefresh]} onRefresh={this.handleRefresh}>
                    <Text style={{fontSize:"28rem",color:"#3089dc"}}>{this.state.refreshText}</Text>
                </RefreshControl>
				<Dialog ref="modal1" duration={1000} visible={true} contentStyle={styles.modalStyle}>
                    <View style={styles.body}>
                        <View style={{alignItems:'center'}}>
							<Image
							style={{ width:200,height:200}}
							src="https://img.alicdn.com/imgextra/i4/27390555/O1CN01MJaLH61FyEICPoPvU_!!27390555.gif"
							/>
						</View>
                        <View style={styles.head}><Text>精彩马上开始</Text></View>
                    </View>
					{/*
                    <View style={styles.footer}>
                        <Button style={styles.dlgBtn} type="normal" onPress={this.hideModal}>取消</Button>
                        <Text style={styles.dlgBtnSeperator}>|</Text>
                        <Button style={styles.dlgBtn} type="normal" onPress={this.hideModalAndConfirm}>确定</Button>
                    </View>
					*/}
                </Dialog>
				<Dialog ref="done" duration={1000} contentStyle={styles.modalStyle}  onMaskPress={this.onMaskPress}>
                    <View style={styles.body}>
                        <View style={styles.head}><Text style={styles.textHead}>结束了</Text></View>
                        <View style={styles.tips}><Text style={styles.text}>真抱歉，这次活动结束了。请再接再厉，下次不要错过哦！当然，您还可以邀请别人参加，记住，机会只有1次</Text></View>
                    </View>
                    <View style={styles.footer}>
                        <Button style={styles.dlgBtn} type="normal" onPress={this.hideModal}>取消</Button>
                        <Text style={styles.dlgBtnSeperator}>|</Text>
                        <Button style={styles.dlgBtn} type="normal" onPress={this.hideModal}>确定</Button>
                    </View>
                </Dialog>
                <CountdownPromV1 
					countdown={this.state.countdown}
					limit={countdownNum}
					limitColor="#FFFFFF"
					img={countdownBg}
					/><ShopTitleV1 
					icon={shopIcon}
					shoptitle={shopTitle}
					istmall={isTmall}
					shoplev={shopLev}
					/><CountdownItemsV1 
					data={this.state.data}
					countdownNum={countdownNum}
					/>
				<Text style={{fontSize:"28rem",color:"#666666",textAlign:"center"}}>本活动由微折提供技术支持</Text>
            </ScrollView>

        )
    }
}
const styles={
    vscroller:{
        flex:1,
    },
	countdown:{
		fontSize:"200rem",
		textAlign:"center"
	},
    itemRefresh:{
        width:750,
        height:100,
        alignItems:'center',
        justifyContent:'center',

    },
    item:{
        height:'300rem',
        alignItems:'center',
        justifyContent:'center',
    },
  wrapper: {
    paddingLeft: '24rem',
    paddingRight: '24rem',
    paddingTop: '24rem',
    backgroundColor:'#f4f4f4'
  },
  click: {
    height: '100rem',
    lineHeight: '100rem',
    textAlign: 'center',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#ccc'
  },
  modalStyle: {
    width: '578rem',
    height: '364rem',
    borderTopColor:'#FF9000',
    borderTopStyle:'solid',
    borderTopWidth:'8rem',
    // padding:'10rem',
    borderRadius:'8rem',
  },
  body: {
    flex:1,
    paddingLeft:40,
    paddingRight:40,
    paddingTop:30,
    // justifyContent: 'center',
    borderRadius:'8rem',
    backgroundColor: '#ffffff',
  },
  head:{
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textHead:{
    color:'#3d4145',
    fontSize:32,
  },
  tips:{

  },
  text:{
    fontSize:'28rem',
    lines:3,
    [`-webkit-line-clamp`]: 3,
    overflow: 'hidden',
    height:'120rem',
    lineHeight:'40rem',
    color:'#60646e',
    textOverflow:'ellipsis'
  },
  footer: {
    borderTopColor:'#dddddd',
    flexDirection:'row',
    borderTopStyle:'solid',
    borderTopWidth:1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    height: '94rem'
  },
  dlgBtn:{
    flex:1,
    borderWidth:0,
    borderColor:'#FFFFFF',
    color:'#FF9000'
  },
  dlgBtnSeperator:{
    color:'#dddddd'
  }
}
render(<App/>);

